<template>
  <div class="inventoryList">
    <div class="searchBox search-box-layout">
      <Row :gutter="24">
        <Col span="4">
        <p class="label">{{$t('common.WarehouseNo')}}</p>
        <div class="ipt">
          <Select v-model="searchParams.warehouseIds" filterable clearable @on-change="getShelfList">
            <Option v-for="(item) of backupList" :value="item.id" :key="item.id" :label="item.backupNo+'-'+item.backupName"></Option>
          </Select>
        </div>
        </Col>
        <Col span="4">
        <p class="label">{{$t('spareParts.ReservoirNo')}}</p>
        <div class="ipt">
          <Select v-model="searchParams.shelfIds" filterable clearable @on-change="getLocationList">
            <Option v-for="(item) of shelfList" :value="item.id" :key="item.id" :label="item.shelfNo+'-'+item.shelf"></Option>
          </Select>
        </div>
        </Col>
        <Col span="4">
        <p class="label">{{$t('spareParts.LocationNo')}}</p>
        <div class="ipt">
          <Select v-model="searchParams.locationIds" filterable clearable>
            <Option v-for="(item) of locationList" :value="item.id" :key="item.id" :label="item.locationNo+'-'+item.location"></Option>
          </Select>
        </div>
        </Col>
        <Col span="4">
        <p class="label">{{ $t('计划')}}</p>
        <div class="ipt">
          <Input type="text" v-model="searchParams.planName" :placeholder="`${$t('common.inputInfo')}`" clearable></Input>
        </div>
        </Col>
        <Col span="4">
        <p class="label">{{ $t('备件分类') }}</p>
        <div class="ipt">
          <Select v-model="searchParams.sparePartsVal" filterable clearable @on-change="handleChange">
            <Option v-for="(item) of sparePartsList" :value="item.label" :key="item.label" :label="item.value"></Option>
          </Select>
        </div>
        </Col>
        <Col span="4">
        <p class="label">{{ $t('盘点周期') }}</p>
        <div class="ipt">
          <Select v-model="searchParams.triggerCycle" filterable clearable>
            <Option v-for="(item, index) of cycle" :value="item.key" :key="index" :label="item.name"></Option>
          </Select>
        </div>
        </Col>
        <Col span="24" align="center">
        <p class="label hide-label">--</p>
        <div class="ipt">
          <Button class="search-btn" type="primary" @click="changeNum()" v-has="'dmsBackupPlanList'">{{ $t('common.Query') }}</Button>
          <Button class="reset-btn" @click="reset()" v-has="'dmsBackupPlanList'">{{ $t('common.reset') }}</Button>
        </div>
        </Col>
      </Row>
    </div>
    <div class="list-layout mt16">
      <div class="btns clear">
        <span class="title">{{ $t('common.listInformation') }}</span>
        <Button @click="edit({},'new')" v-has="'addinventoryplan'">{{ $t('新建盘点计划') }}</Button>
        <Button @click="exportTemplate" v-has="'dmsBackupPlanDownloadTemplate'">{{ $t('common.Download') }}</Button>
        <Button @click="importExcelShow" v-has="'dmsBackupPlanImport'">{{ $t('common.Import') }}</Button>
        <Button @click="handleBatchDisabled" v-if="selectIds.length" v-has="'dmsBackupPlanBatchEnable'">{{ status==='1'?$t('禁用'):$t('启用') }}</Button>
        <Button @click="handleBatchDelete" v-if="selectIds.length" v-has="'dmsBackupPlanDeleteBatch'">{{ $t('common.batchDelete') }}</Button>
        <Button @click="getTableColumns(columns)">{{ handleContextMenuStatus ? $t('显示操作栏'):$t('隐藏操作栏') }}</Button>
      </div>
      <div class="tableContent">
        <Table border class="resizable-table" @on-column-width-resize="onColumnWidthResize" ref="selection" :columns="columnsList" :data="dataArr"
               @on-selection-change="onSelectChange">
          <template slot-scope="{ row }" slot="action">
            <span class="operationBtn" @click="confirm(row)" v-has="'dmsBackupPlanBatchEnable'"><i class="iconfont zy-common-jinyong"></i>{{ status==='1'?$t('禁用'):$t('启用') }}</span>
            <span class="operationBtn" @click="look(row)" v-has="'lookinventoryplan'"><i class="iconfont zy-common-chakan"></i>{{ $t('common.Check') }}</span>
            <span class="operationBtn" @click="edit(row,'copy')" v-has="'copyinventoryplan'"><i class="iconfont zy-common-bianji"></i>{{ $t('复制') }}</span>
            <span class="operationBtn" @click="edit(row,'edit')" v-has="'editinventoryplan'"><i class="iconfont zy-common-bianji"></i>{{ $t('common.Edit') }}</span>
            <span class="operationBtn" @click="deleteRow(row)" v-has="'dmsBackupPlanDeleteBatch'"><i class="iconfont zy-common-shanchu"></i>{{ $t('common.Delete') }}</span>
          </template>
        </Table>
      </div>
      <div class="pageWrap mt16">
        <pageLeftTitle :total="total" :selected="selectIds.length" />
        <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum" @on-change="changePageNum"
              @on-page-size-change="changePageSize" show-sizer show-total />
      </div>
    </div>
    <Modal :mask-closable="false" class="modal-title-layout" v-model="delFaultCodeShowF" :title="$t('common.Delete')">
      <div class="icon red">
        <i class="iconfont zy-common-shanchu"></i>
      </div>
      <p class="title">
        <span>{{$t('common.confirmDelete')}}</span>
      </p>
      <div slot="footer">
        <Button type="default" @click="delFaultCodeShowF = false">{{ $t('common.Cancle') }}</Button>
        <Button type="primary" :loading="loading" @click="deleteOk">{{ $t('maintenance.Confirmed') }}
        </Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" class="modal-title-layout" v-model="confirmFaultCodeShowF" :title="status==='1'?$t('禁用'):$t('启用')">
      <div :class="status==='1'?'icon red':'icon blue'">
        <i class="iconfont zy-common-jieguo"></i>
      </div>
      <p class="title">
        <span>{{$t('是否确认?')}}</span>
      </p>
      <div slot="footer">
        <Button type="default" @click="confirmFaultCodeShowF = false">{{ $t('common.Cancle') }}</Button>
        <Button type="primary" :loading="loading" @click="disabledOk">{{ $t('maintenance.Confirmed') }}</Button>
      </div>
    </Modal>
    <importExcelModal :importExcelStateF="importExcelState" v-if="importExcelState" @importExcelChange="importExcelChange"></importExcelModal>
  </div>
</template>

<script>
import importExcelModal from '@/components/importExcel.vue'
import fileDownload from 'js-file-download'
import toggleTableOperation from '@/mixins/toggleTableOperation'
import { getBackup, getShelf, getLocation } from '@/api/index.js'
export default {
  name: 'inventoryList',
  mixins: [toggleTableOperation],
  components: { importExcelModal },
  data() {
    return {
      status: '1',
      selectIds:[],
      delIds: [],
      pageSize: 10,
      pageNum: 1,
      pageSizeOption: [10, 20, 30, 40],
      loading: false,
      delFaultCodeShowF: false, //是否显示删除弹窗
      confirmFaultCodeShowF: false,
      searchParams: {},
      cycle: [
        { name: this.$t('月度'), key: 3 },
        { name: this.$t('季度'), key: 4 },
        { name: this.$t('半年度'), key: 5 },
        { name: this.$t('年度'), key: 6 }
      ],
      cycleData: [
        { name: '月', key: 3 },
        { name: '季度', key: 4 },
        { name: '半年', key: 5 },
        { name: '年', key: 6 }
      ],
      sparePartsList: [
        {
          label: 'AV',
          value: 'AV类'
        },
        {
          label: 'AE',
          value: 'AE类'
        },
        {
          label: 'AD',
          value: 'AD类'
        },
        {
          label: 'BV',
          value: 'BV类'
        },
        {
          label: 'BE',
          value: 'BE类'
        },
        {
          label: 'BD',
          value: 'BD类'
        },
        {
          label: 'CV',
          value: 'CV类'
        },
        {
          label: 'CE',
          value: 'CE类'
        },
        {
          label: 'CD',
          value: 'CD类'
        }
      ],
      columns: [
        {
          type: 'selection',
          align: 'center',
          width: 60
        },
        {
          title: `${this.$t('计划')}`,
          key: 'backupPlanName',
          width: 200,
          align: 'left',
          tooltip: true,
          resizable: true
        },
        {
          title: `${this.$t('盘点周期')}`,
          key: 'triggerCycleName',
          minWidth: 160,
          align: 'center',
          tooltip: true,
          resizable: true
        },
        {
          title: `${this.$t('触发间隔')}`,
          key: 'triggerInterval',
          minWidth: 150,
          align: 'center',
          tooltip: true,
          render: (h, params) => {
            return h('div', [h('span', {}, params.row.triggerInterval+this.cycleData.find(item=>item.key===params.row.triggerCycle).name )])
          },
          resizable: true
        },
        {
          title: `${this.$t('首次生成时间')}`,
          key: 'firstTime',
          minWidth: 200,
          align: 'center',
          tooltip: true,
          resizable: true
        },
        {
          title: `${this.$t('计划截止时间')}`,
          key: 'planEndTime',
          minWidth: 200,
          align: 'center',
          tooltip: true,
          resizable: true
        },
        {
          title: `${this.$t('创建人')}`,
          key: 'createName',
          minWidth: 160,
          align: 'center',
          tooltip: true,
          resizable: true
        },
        {
          title: `${this.$t('创建时间')}`,
          key: 'createTime',
          minWidth: 200,
          align: 'center',
          tooltip: true,
          resizable: true
        },
        {
          title: `${this.$t('common.operation')}`,
          slot: 'action',
          fixed: 'right',
          minWidth: this.util.autoWidth(400, 480),
          align: 'center'
        }
      ],
      importExcelState: false,
      dataArr: [],
      backupList: [],
      shelfList: [],
      locationList: []
    }
  },
  created() {
    this.getTableColumnsWidth(this.columns)
    this.changeNum()
    this.getBackupList()
  },
  mounted() {},
  methods: {
    handleChange(val) {
      if (val) {
        this.searchParams.sparePartsABC = val[0]
        this.searchParams.sparePartsVED = val[1]
      } else {
        this.searchParams.sparePartsABC = ''
        this.searchParams.sparePartsVED = ''
      }
    },
    //获取仓库
    async getBackupList() {
      const { code, data } = await getBackup({})
      if (code === 200) {
        this.backupList = data
      }
    },
    //获取货架下拉列表
    async getShelfList(item) {
      this.shelfList = []
      this.locationList = []
      delete this.searchParams.shelfIds
      delete this.searchParams.locationIds
      if (!item) {
        return
      }
      let params = {}
      params.delIds = []
      params.delIds.push(item)
      const { code, data } = await getShelf(params)
      if (code === 200) {
        this.shelfList = data
      }
    },
    //获取库位下拉列表
    async getLocationList(item) {
      this.locationList = []
      delete this.searchParams.locationIds
      if (!item) {
        return
      }
      let params = {}
      params.delIds = []
      params.delIds.push(item)
      const { code, data } = await getLocation(params)
      if (code === 200) {
        this.locationList = data
      }
    },
    importExcelChange(val) {
      this.importExcelState = false
      if (val === 'success') {
        this.$Message.success('导入成功')
        this.changeNum()
      }
    },
    //下载模板
    exportTemplate() {
      const filName = this.$t('盘点计划模板')
      this.axios({
        method: 'get',
        url: '/dms/dmsBackupPlan/downloadTemplate',
        responseType: 'blob'
      }).then(res => {
        fileDownload(res, filName + '.xlsx')
      })
    },
    /*导入*/
    importExcelShow() {
      this.importExcelState = true
    },
    onSelectChange(selection) {
      let myArray = []
      selection.map(item => {
        myArray.push(item.id)
      })
      this.delIds = myArray
      this.selectIds = myArray
    },
    deleteOk() {
      this.loading = true
      this.axios({
        method: 'delete',
        url: '/dms/dmsBackupPlan/deleteBatch',
        data: {
          ids: this.delIds
        }
      })
        .then(res => {
          if (res.code === 200) {
            this.searchList()
            this.$Message.success(res.msg)
          } else {
            this.$Message.warning({ content: res.msg, duration: 6, closable: true })
          }
        })
        .finally(() => {
          this.loading = false
          this.delFaultCodeShowF = false
        })
    },
    confirm(row) {
      //点击展示提示禁用启用弹窗
      this.confirmFaultCodeShowF = true
      this.delIds = []
      this.delIds.push(row.id)
    },
    deleteRow(row) {
      //点击展示提示删除弹窗
      this.delFaultCodeShowF = true
      this.delIds = []
      this.delIds.push(row.id)
    },
    handleBatchDelete() {
      this.delFaultCodeShowF = true
    },
    handleBatchDisabled() {
      this.confirmFaultCodeShowF = true
    },
    disabledOk() {
      let data = {
        ids: this.delIds,
        planStatus: this.status === '1' ? 0 : 1
      }
      this.loading = true
      this.axios({
        method: 'post',
        url: '/dms/dmsBackupPlan/batchEnable',
        data
      })
        .then(res => {
          if (res.code === 200) {
            this.searchList()
            this.$Message.success(res.msg)
          } else {
            this.$Message.warning({ content: res.msg, duration: 6, closable: true })
          }
        })
        .finally(() => {
          this.confirmFaultCodeShowF = false
          this.loading = false
        })
    },
    look(row) {
      this.$emit('changeDetailVisible', true, row.id)
    },
    reset() {
      this.searchParams = {}
      this.changeNum()
    },
    //分页
    changeNum() {
      this.pageNum = 1
      this.searchList()
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize
      this.searchList()
    },
    changePageNum(val) {
      this.pageNum = val
      this.searchList()
    },
    searchList(status) {
      if (status) {
        this.status = status
      }
      let data = {
        status: this.status,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      for (let key in this.searchParams) {
        if (this.searchParams[key]) {
          this.$set(data, key, this.searchParams[key])
        }
      }
      data.warehouseIds = data.warehouseIds ? data.warehouseIds.toString().split() : []
      data.shelfIds = data.shelfIds ? data.shelfIds.toString().split() : []
      data.locationIds = data.locationIds ? data.locationIds.toString().split() : []
      delete data.sparePartsVal
      this.axios({
        method: 'post',
        url: '/dms/dmsBackupPlan/list',
        data
      }).then(res => {
        if (res.code === 200) {
          this.dataArr = res.data.list
          this.total = res.data.total
          this.selectIds = []
        } else {
          this.$Message.warning({ content: res.msg, duration: 6, closable: true })
        }
      })
    },
    edit(row, str) {
      this.$emit('addPlan', true, row, str)
    }
  }
}
</script>